<template>
  <page-header-wrapper>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="会员等级"
      :ghost="false"
      @back="
        () => {
          $router.back()
        }
      "
    />
    <a-card :bordered="false" class="card_top_padding no_need_padding" style="margin-bottom: 11px">
      <a-tabs
        @change="
          (val) => {
            this.activeKey = val
          }
        "
        :activeKey="activeKey"
      >
        <a-tab-pane key="base" tab="基础设置"> </a-tab-pane>
        <a-tab-pane key="level" tab="升级条件"> </a-tab-pane>
        <!-- <a-tab-pane key="old_commission" tab="原推荐关系佣金"> </a-tab-pane> -->
        <a-tab-pane key="chain_commission" tab="链动推荐关系佣金"> </a-tab-pane>
      </a-tabs>
      <a-form-model
        ref="editForm"
        :model="editForm"
        :rules="editRules"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 7 }"
      >
        <template v-if="activeKey == 'base'">
          <div class="level_title">图片设置</div>
          <a-form-model-item :labelCol="{ span: 2 }" label="等级图片">
            <cyyUploadImg
              @uploadSuccess="(e) => (editForm.pic_url = e.data)"
              @deleteImg="editForm.pic_url = ''"
              :imgSrc="editForm.pic_url"
              imgSizeText="323*148"
            >
            </cyyUploadImg>
          </a-form-model-item>
          <div class="level_title" style="border-top: 1px solid #e9e9e9; padding-top: 25px">会员设置</div>
          <a-form-model-item :labelCol="{ span: 2 }" label="是否为默认" prop="name">
            <a-radio-group v-model="editForm.is_default" :disabled="!canEditIsDefault">
              <a-radio value="0"> 否 </a-radio>
              <a-radio value="1"> 是 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item :labelCol="{ span: 2 }" label="股东等级" prop="level">
            <a-select :disabled="editForm.id" v-model="editForm.level" placeholder="请选择股东等级">
              <a-select-option :value="item" v-for="item in levelList" :key="item"> {{ item }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item :labelCol="{ span: 2 }" label="等级名称" prop="name">
            <a-input placeholder="请输入等级名称" v-model="editForm.name" />
          </a-form-model-item>
          <a-form-model-item :labelCol="{ span: 2 }" label="会员等级" prop="member_level">
            <a-select v-model="editForm.member_level" default-value="-1" placeholder="请选择会员等级">
              <a-select-option :value="item.level - 0" v-for="item in memberLevelList" :key="item.level">
                {{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </template>

        <template v-if="activeKey == 'level'">
          <div class="level_title">链动2+1设置</div>
          <a-form-model-item label="下级直属股东升级">
            <a-radio-group v-model="editForm.condition.shareholder.is_open">
              <a-radio value="0"> 关闭 </a-radio>
              <a-radio value="1"> 开启 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="消费前" v-if="editForm.condition.shareholder.is_open == 1">
            <a-input type="number" min="0" step="1" addon-after="位" v-model="editForm.condition.shareholder.num" />
          </a-form-model-item>
          <a-form-model-item label="升级为" v-if="editForm.condition.shareholder.is_open == 1">
            <a-select
              @change="handleChange1"
              v-model="editForm.condition.shareholder.to_level_id"
              placeholder="请选择会员等级"
            >
              <a-select-option :value="item.id - 0" v-for="(item, index) of shareholderLevelList" :key="index">
                {{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="是否链动独立团队" v-if="editForm.condition.shareholder.is_open == 1">
            <a-radio-group v-model="editForm.condition.shareholder.independent_team">
              <a-radio value="0"> 否 </a-radio>
              <a-radio value="1"> 是 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <div class="level_title" style="border-top: 1px solid #e9e9e9; padding-top: 25px">条件设置</div>
          <a-form-model-item :wrapperCol="{ span: 10 }" label="团队人数">
            <a-radio-group v-model="editForm.condition.man.is_open">
              <a-radio value="0"> 关闭 </a-radio>
              <a-radio value="1"> 开启 </a-radio>
            </a-radio-group>
            <template v-if="editForm.condition.man.is_open == 1">
              <a-table
                style="margin-top: 10px"
                :pagination="false"
                :columns="teamColumns"
                :data-source="editForm.condition.man.value"
              >
                <template slot="level" slot-scope="text, record">
                  <a-input-number style="width: 100%" min="1" max="100" v-model="record.level"></a-input-number>
                </template>
                <template slot="count" slot-scope="text, record">
                  <a-input-number style="width: 100%" min="1" v-model="record.count"></a-input-number>
                </template>
                <template slot="money" slot-scope="text, record">
                  <a-input-number style="width: 100%" min="0.01" v-model="record.money"></a-input-number>
                </template>
                <template slot="operation" slot-scope="text, record, index">
                  <a @click="() => removeTeam(index)">删除</a>
                </template>
              </a-table>
              <a-button
                style="margin-top: 10px"
                icon="plus"
                block
                type="dashed"
                @click="() => editForm.condition.man.value.push({ level: '', count: '', money: '' })"
              >
                添加规则
              </a-button>
            </template>
          </a-form-model-item>
          <a-form-model-item :wrapperCol="{ span: 10 }" label="团队订单金额">
            <a-radio-group v-model="editForm.condition.order.is_open">
              <a-radio value="0"> 关闭 </a-radio>
              <a-radio value="1"> 开启 </a-radio>
            </a-radio-group>
            <template v-if="editForm.condition.order.is_open == 1">
              <a-table
                style="margin-top: 10px"
                :pagination="false"
                :columns="orderColumns"
                :data-source="editForm.condition.order.value"
              >
                <template slot="level" slot-scope="text, record">
                  <a-input-number style="width: 100%" min="1" max="100" v-model="record.level"></a-input-number>
                </template>
                <template slot="count" slot-scope="text, record">
                  <a-input-number style="width: 100%" min="0.01" step="0.01" v-model="record.count"></a-input-number>
                </template>
                <template slot="operation" slot-scope="text, record, index">
                  <a @click="() => removeOrder(index)">删除</a>
                </template>
              </a-table>
              <a-button
                style="margin-top: 10px"
                icon="plus"
                block
                type="dashed"
                @click="() => editForm.condition.order.value.push({ level: '', count: '' })"
              >
                添加规则
              </a-button>
            </template>
          </a-form-model-item>
          <a-form-model-item label="消费金额">
            <a-radio-group v-model="editForm.condition.self.is_open">
              <a-radio value="0"> 关闭 </a-radio>
              <a-radio value="1"> 开启 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item
            label="消费方式"
            v-if="editForm.condition.self.is_open == 1"
            help="设置为0元，并且未开启股东审核的情况下，用户注册即可成为该等级的股东，全局只有一个等级可以设置成0"
          >
            <a-radio-group v-model="editForm.condition.self.value.order_number">
              <a-radio value="0"> 累计 </a-radio>
              <a-radio value="1"> 单笔 </a-radio>
            </a-radio-group>
            <div style="margin-top: 10px">
              <a-input
                type="number"
                addon-after="元"
                min="0"
                step="0.01"
                placeholder="请输入金额"
                v-model="editForm.condition.self.value.price"
              ></a-input>
            </div>
          </a-form-model-item>
          <a-form-model-item label="充值金额">
            <a-radio-group v-model="editForm.condition.recharge.is_open">
              <a-radio value="0"> 关闭 </a-radio>
              <a-radio value="1"> 开启 </a-radio>
            </a-radio-group>
            <div style="margin-top: 10px" v-if="editForm.condition.recharge.is_open == 1">
              <a-input
                type="number"
                addon-after="元"
                min="0"
                step="0.01"
                placeholder="请输入金额"
                v-model="editForm.condition.recharge.value"
              ></a-input>
            </div>
          </a-form-model-item>
          <a-form-model-item label="购买指定商品">
            <a-radio-group
              v-model="editForm.condition.goods.is_open"
              :disabled="editForm.condition.shareholder.is_open === '1'"
            >
              <a-radio value="0"> 关闭 </a-radio>
              <a-radio value="1"> 开启 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <template v-if="editForm.condition.goods.is_open == 1">
            <a-form-model-item label="商品ID">
              <a-input v-model="editForm.condition.goods.value.id" disabled style="width: calc(100% - 98px)"></a-input>
              <a-button type="primary" @click="visible = true" style="margin-left: 10px; position: relative; top: -1px">
                选择商品
              </a-button>
              <div class="goods-list-wrap" style="margin-top: 20px">
                <span v-for="(item, index) of goodsList" :key="index">
                  <img :src="item.cover_pic" alt="" />
                  <div>{{ item.name }}</div>
                  <a-button
                    type="danger"
                    @click="onRemoveGoods(index, item)"
                    shape="circle"
                    icon="close"
                    size="small"
                  />
                </span>
              </div>
            </a-form-model-item>
            <a-form-model-item label="售后时间设置">
              <a-input type="number" addon-after="天" min="0" v-model="editForm.condition.goods.value.day" />
            </a-form-model-item>
            <a-form-model-item label="是否自动发货">
              <a-select v-model="editForm.condition.goods.value.is_send">
                <a-select-option value="1"> 是 </a-select-option>
                <a-select-option value="0"> 否 </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="是否自动确认收货">
              <a-select v-model="editForm.condition.goods.value.is_confirm">
                <a-select-option value="1"> 是 </a-select-option>
                <a-select-option value="0"> 否 </a-select-option>
              </a-select>
            </a-form-model-item>
          </template>
          <div class="level_title" style="border-top: 1px solid #e9e9e9; padding-top: 25px">特权介绍</div>
          <a-form-model-item label="特权详情" prop="detail">
            <WangEditor :value="detail" @change="onDescChange"></WangEditor>
            <a-textarea :hidden="true" v-model="editForm.detail" />
          </a-form-model-item>
        </template>

        <template v-if="activeKey == 'chain_commission'">
          <div class="level_title">比例设置</div>

          <a-form-model-item
            label="级差比例(%)"
            prop="old_range_rate"
            help="设置20%，那么直推奖金为20%，间推奖金为20%-低等级会员极差佣金。"
          >
            <a-input-number style="width: 100%" v-model="editForm.old_range_rate" step="0.01" :min="0" :max="100" />
          </a-form-model-item>

          <a-form-model-item label="复购级差比例(%)" prop="old_repeat_range_rate">
            <a-input-number
              style="width: 100%"
              v-model="editForm.old_repeat_range_rate"
              step="0"
              :min="0"
              :max="100"
            />
          </a-form-model-item>

          <a-form-model-item label="享受直推出局团队收益比例(%)" prop="team_reward_rate">
            <a-input-number style="width: 100%" v-model="editForm.team_reward_rate" step="0.01" :min="0" :max="100" />
          </a-form-model-item>
        </template>

        <div
          style="
            margin-top: 20px;
            padding-top: 30px;
            padding-bottom: 30px;
            border-top: 1px solid #e9e9e9;
            text-align: center;
          "
        >
          <a-space>
            <a-button type="primary" @click="onSubmit"> 保存 </a-button>
            <a-button
              @click="
                () => {
                  $router.back()
                }
              "
            >
              取消
            </a-button>
          </a-space>
        </div>
      </a-form-model>
    </a-card>
    <select-goods v-model="visible" @onOk="selectGoodsOk" status="1"></select-goods>
  </page-header-wrapper>
</template>

<script>
import { setting, editLevel, levelDetail, shareHolderGetFilter, allLevel } from '@/api/shareholder'
import { getAllLevelList } from '@/api/user'
import { getGoodsByIds } from '@/api/goods/goods'

import { WangEditor } from '@/components'
import SelectGoods from '@/components/SearchGoods/index'
import { cyyUploadImg } from '@/components/CyyUi/index'

const teamColumns = [
  {
    title: '团队(级内)',
    dataIndex: 'level',
    width: '20%',
    scopedSlots: { customRender: 'level' },
  },
  {
    title: '达到(人)',
    dataIndex: 'count',
    width: '20%',
    scopedSlots: { customRender: 'count' },
  },
  {
    title: '消费达到(钱以上)',
    dataIndex: 'money',
    width: '45%',
    scopedSlots: { customRender: 'money' },
  },
  {
    title: '操作',
    width: '100px',
    scopedSlots: { customRender: 'operation' },
  },
]

const orderColumns = [
  {
    title: '团队(级内)',
    dataIndex: 'level',
    width: '45%',
    scopedSlots: { customRender: 'level' },
  },
  {
    title: '达到(元)',
    dataIndex: 'count',
    width: '45%',
    scopedSlots: { customRender: 'count' },
  },
  {
    title: '操作',
    width: '100px',
    scopedSlots: { customRender: 'operation' },
  },
]

export default {
  components: {
    WangEditor,
    SelectGoods,
    cyyUploadImg,
  },
  data() {
    const checkDetail = (rule, value, callback) => {
      if (!this.editForm.detail || this.editForm.detail == '') {
        callback(new Error('请输入特权详情'))
      } else {
        callback()
      }
    }
    return {
      goodsLoading: false,
      goodsList: [],
      teamColumns,
      orderColumns,
      levelList: [],
      memberLevelList: [],
      shareholderLevelList: [],
      // 编辑或添加等级的表单
      editForm: {
        pic_url: '',
        id: 0,
        // 股东等级
        level: '',
        // 等级名称
        name: '',
        // 股东等级关联的会员等级
        member_level: '',
        // 是否为默认等级
        is_default: '0',

        // 团队奖励比例
        team_reward_rate: 0,
        old_team_reward_rate: 0,
        // 极差比例
        range_rate: 0,
        old_range_rate: 0,
        old_repeat_range_rate: 0,
        // 股东比例
        holder_rate: 0,
        old_holder_rate: 0,
        // 同级分润比例
        equal_rate: 0,
        old_equal_rate: 0,
        // 等级特权说明
        detail: '',
        share_rate_one: 0,
        share_rate_two: 0,
        share_rate_three: 0,
        old_share_rate_one: 0,
        old_share_rate_two: 0,
        old_share_rate_three: 0,
        // 升级条件
        condition: {
          man: {
            is_open: '0',
            value: [],
          },
          order: {
            is_open: '0',
            value: [],
          },
          self: {
            is_open: '0',
            value: { price: '0', order_number: '0' },
          },
          recharge: {
            is_open: '0',
            value: '',
          },
          goods: {
            is_open: '0',
            value: { id: [], day: '', is_send: '1', is_confirm: '1' },
          },
          shareholder: {
            is_open: '0',
            num: 0,
            from_level_id: '',
            to_level_id: '',
            independent_team: '0',
          },
        },
      },
      // 编辑等级表单验证规则
      editRules: {
        level: [{ required: true, message: '请选择等级', trigger: 'change' }],
        name: [{ required: true, message: '请输入等级名称', trigger: 'blur' }],
        old_range_rate: [{ required: true, message: '请输入极差比例', trigger: 'blur' }],
        old_repeat_range_rate: [{ required: true, message: '请输入复购极差比例', trigger: 'blur' }],
        holder_rate: [{ required: true, message: '请输入股东比例', trigger: 'blur' }],
        old_holder_rate: [{ required: true, message: '请输入股东比例', trigger: 'blur' }],
        detail: [{ validator: checkDetail, trigger: 'blur' }],
      },
      // 等级特权富文本
      detail: '',
      visible: false,
      // 是否可以编辑默认等级
      canEditIsDefault: true,
      activeKey: 'base',
    }
  },
  computed: {},
  watch: {
    'editForm.condition.goods.value.id': function (val) {
      this.goodsLoading = true
      getGoodsByIds({ ids: val })
        .then((res) => {
          this.goodsList = res.data
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.goodsLoading = false
        })
    },
    'editForm.condition.shareholder.is_open': function (val) {
      if (parseInt(val) === 1) {
        this.editForm.condition.goods.is_open = '0'
      }
    },
  },
  created() {
    this.allLevel()
    this.getAllLevelList()
    if (this.$route.query.id) {
      this.getDetail(this.$route.query.id)
      this.levelList = this.getlevelList()
    } else {
      shareHolderGetFilter().then((res) => {
        if (res.code === 0) {
          let levelList = this.getlevelList()
          if (res.data || res.data.length) {
            const disabledList = res.data.map((el) => parseInt(el))

            levelList = levelList.filter((el) => disabledList.indexOf(el) === -1)
          }

          this.levelList = levelList
        }
      })
    }
  },
  methods: {
    onRemoveGoods(index, goods) {
      console.log(index, goods)
      if (typeof this.editForm.condition.goods.value.id === 'string') {
        this.editForm.condition.goods.value.id = this.editForm.condition.goods.value.id.split(',')
      }
      this.editForm.condition.goods.value.id.splice(index, 1)
    },
    removeTeam(index) {
      this.editForm.condition.man.value.splice(index, 1)
    },
    removeOrder(index) {
      this.editForm.condition.order.value.splice(index, 1)
    },
    handleChange(value) {
      // console.log(value);
      this.editForm.condition.shareholder.from_level_id = value
    },
    handleChange1(value) {
      // console.log(value);
      this.editForm.condition.shareholder.to_level_id = value
    },
    // 获取所有会员等级列表
    async getAllLevelList() {
      const res = await getAllLevelList()
      if (res.code == 0) {
        this.memberLevelList = res.data
      }
    },
    // 获取所有等级列表
    async allLevel() {
      const res = await allLevel()
      if (res.code == 0) {
        this.shareholderLevelList = res.data.list
      }
    },
    getlevelList() {
      const levelList = []
      for (let i = 0; i < 100; i++) {
        levelList.push(i + 1)
      }

      return levelList
    },

    // 根据id获取门店详情
    getDetail(id) {
      const hide = this.$message.loading('加载中', 0)
      levelDetail({ level_id: id })
        .then((res) => {
          if (res.code == 0) {
            this.editForm.id = res.data.id
            this.editForm.level = res.data.level
            this.editForm.name = res.data.name
            this.editForm.member_level = res.data.member_level
            this.editForm.team_reward_rate = res.data.team_reward_rate
            this.editForm.old_team_reward_rate = res.data.old_team_reward_rate
            this.editForm.range_rate = res.data.range_rate
            this.editForm.old_range_rate = res.data.old_range_rate
            this.editForm.holder_rate = res.data.holder_rate
            this.editForm.old_holder_rate = res.data.old_holder_rate
            this.editForm.equal_rate = res.data.equal_rate
            this.editForm.old_equal_rate = res.data.old_equal_rate
            this.editForm.detail = res.data.detail
            this.editForm.is_default = res.data.is_default + ''
            this.editForm.share_rate_one = res.data.share_rate_one
            this.editForm.share_rate_two = res.data.share_rate_two
            this.editForm.share_rate_three = res.data.share_rate_three
            this.editForm.old_share_rate_one = 0
            this.editForm.old_share_rate_two = 0
            this.editForm.old_share_rate_three = 0
            this.editForm.pic_url = res.data.pic_url
            this.editForm.old_repeat_range_rate = res.data.old_repeat_range_rate
            if (this.editForm.is_default == 1) {
              this.canEditIsDefault = false
            }
            if (res.data.condition) {
              this.editForm.condition = Object.assign({}, this.editForm.condition, res.data.condition)
            }
            this.detail = res.data.detail
            this.memberLevelList = res.member_level_list
          }
          hide()
        })
        .catch(() => {
          hide()
        })
    },
    onDescChange(e) {
      this.editForm.detail = e
    },
    // 点击提交表单
    onSubmit() {
      if (
        this.editForm.condition.man.is_open == 0 &&
        this.editForm.condition.order.is_open == 0 &&
        this.editForm.condition.self.is_open == 0 &&
        this.editForm.condition.recharge.is_open == 0 &&
        this.editForm.condition.goods.is_open == 0 &&
        this.editForm.condition.shareholder.is_open == 0
      ) {
        return this.$message.warning('请开启最少一个升级条件!')
      }
      this.$refs['editForm'].validate(async (valid) => {
        if (valid) {
          const hide = this.$message.loading('加载中', 0)
          this.editForm.old_equal_rate = 0 // 兼容处理
          const res = await editLevel(this.editForm)
          if (res.code == 0) {
            this.$router.back()
          }
          hide()
        } else {
          return false
        }
      })
    },
    // 提交设置
    async submit(param) {
      const res = await setting(param)
      if (res.code == 0) {
      }
    },
    selectGoodsOk(e) {
      const ids = []
      e.forEach((item) => {
        ids.push(item.id)
      })
      let oldIds = this.editForm.condition.goods.value.id
      if (typeof this.editForm.condition.goods.value.id === 'string') {
        oldIds = oldIds.split(',')
      }

      const newIds = ids.concat(oldIds).filter((item, index, arr) => {
        return arr.indexOf(item) === index
      })

      this.editForm.condition.goods.value.id = newIds.sort(function (a, b) {
        return a - b
      })
    },
  },
}
</script>

<style lang="less" scoped>
/deep/.ant-page-header {
  padding-bottom: 0;
  border: 0 none !important;
}
.level_title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 10px 0 20px 0;
}
.goods-list-wrap span {
  margin-right: 15px;
  display: inline-block;
  position: relative;
}
.goods-list-wrap span img {
  width: 80px;
  height: 80px;
  border-radius: 3px;
}
.goods-list-wrap span div {
  width: 80px;
  font-size: 12px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goods-list-wrap span button {
  position: absolute;
  top: -8px;
  right: -8px;
}
.box {
  .delivery {
    padding-top: 5px;
    p {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      margin-top: 8px;
    }
  }
  .loadImg {
    padding: 8px;
    width: 104px;
    height: 104px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
    opacity: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    .anticon {
      font-size: 30px;
      color: rgba(0, 0, 0, 0.45);
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .codeBox {
    margin-top: 20px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
  }
  .codePreview {
    color: #fff;
    width: 375px;
    height: 667px;
    background-color: #f83d16;
    background-size: 100% 100%;
    background-position: 100% 100%;
    .userBox {
      display: flex;
      flex-direction: column;
      padding: 27px;
      width: 321px;
      height: 349px;
      border-radius: 24px;
      background-color: #f96932;
      margin: 71px auto 0 auto;
      .userPic {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        background-color: #fff;
      }
      .name {
        font-size: 23px;
        margin-top: 27px;
      }
      .tip {
        margin-top: 6px;
        font-size: 14px;
        opacity: 0.6;
        padding-bottom: 25px;
        border-bottom: 1px solid #fff;
      }
      .codePic {
        padding-top: 25px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .tips {
          display: flex;
          flex-direction: column;
          font-size: 14px;
          opacity: 0.6;
        }
        .pic {
          width: 80px;
          height: 80px;
          background-color: #fff;
          border-radius: 10px;
          padding: 7px;
          span {
            display: block;
            width: 100%;
            height: 100%;
            background-color: #e4e4e4;
          }
        }
      }
    }
    .btns {
      display: flex;
      justify-content: space-between;
      padding: 0 53px;
      margin-top: 33px;
      .btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        span:nth-child(1) {
          width: 65px;
          height: 65px;
          background-color: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          font-size: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        span:nth-child(2) {
          font-size: 13px;
          margin-top: 5px;
        }
      }
    }
  }
  .codeSetting {
    flex: auto;
    margin-left: 100px;
  }
  .settingItem {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .label {
      margin-right: 20px;
    }
  }
}
.goodItem {
  display: flex;
  margin: 10px 0;
  .label {
    width: 150px;
  }
}
.pageHeader {
  display: flex;
  align-items: center;
  padding: 10px 0;
  span {
    color: rgba(0, 0, 0, 0.45);
  }
  span:nth-child(2) {
    margin: 0 5px;
  }
  span:nth-child(4) {
    margin: 0 5px;
  }
  .link:last-child {
    color: rgba(0, 0, 0, 0.65);
  }
}

.flex-let {
  width: 500px;
  overflow: hidden;
}
</style>
